<template>
<div>
    <div class="tag-banner banner">
        <h1 class="banner-title">高德地图</h1>
    </div>

    <div class="blog-container" style="min-height: 2px !important;"></div>
<div  style="margin-top: -170px">
    <div id="container" style="width: 100%;height: calc(100vh - 100px)" ></div>
</div>
</div>
</template>

<script>
    var content = [
        "<div style='font-size: 14px;color: red;width: 200px;height: 50px'>芜湖站</div>"
    ];

    export default {
        name: "GaoDeMap",
        mounted() {


            var map = new AMap.Map("container", {
                zoom: 13,
                center: [118.391643,31.347988],
                resizeEnable: true

            })

            var infoWindow = new AMap.InfoWindow({
                anchor: 'top-right',
                content: content.join("<br>")  //传入 dom 对象，或者 html 字符串
            });


            var clickHandler = function (e) {
                console.log('您在[ ' + e.lnglat.getLng() + ',' + e.lnglat.getLat() + ' ]的位置点击了地图！');
                // 打开信息窗体
                infoWindow.open(map,map.getCenter());
            };
            // 绑定事件

            // 创建一个 Marker 实例：
            var marker = new AMap.Marker({
                position: new AMap.LngLat(118.391643,31.347988),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
                title: '芜湖站',
                // icon: '//webapi.amap.com/theme/v1.3/images/newpc/way_btn2.png',  // Icon的图像
                // content : '<div style="font-size: 12px;width: 100px">这是我自定义的内容</div>'
            });
            marker.on('click', clickHandler);



            //绘制初始路径
            var path = [];
            path.push([118.378702,31.248894]);
            path.push([117.290345,31.797813]);
            path.push([118.798039,31.96875]);
            map.plugin("AMap.DragRoute", function() {
                var    route = new AMap.DragRoute(map, path, AMap.DrivingPolicy.LEAST_FEE); //构造拖拽导航类
                route.search(); //查询导航路径并开启拖拽导航
            });



            AMap.plugin('AMap.CitySearch', function () {
                var citySearch = new AMap.CitySearch()
                citySearch.getLocalCity(function (status, result) {
                    if (status === 'complete' && result.info === 'OK') {
                        // 查询成功，result即为当前所在城市信息
                    }
                })
            })

            // 将创建的点标记添加到已有的地图实例：
            map.add(marker);
            //输入提示
            var autoOptions = {
                input: "tipinput"
            };

            AMap.plugin(['AMap.PlaceSearch','AMap.AutoComplete'], function(){
                var auto = new AMap.AutoComplete(autoOptions);
                var placeSearch = new AMap.PlaceSearch({
                    map: map
                });  //构造地点查询类
                auto.on("select", select);//注册监听，当选中某条记录时会触发
                function select(e) {
                    placeSearch.setCity(e.poi.adcode);
                    placeSearch.search(e.poi.name);  //关键字查询查询
                }
            });
        }
    }
</script>

<style scoped>
    body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";font-size:14px;}
    #l-map{height:calc(100vh - 125px);width:100%;}
    #r-result{width:100%;}

    .tag-banner {
        background: url(../../assets/png/gaode.jpg) center center /
    cover no-repeat;
        background-color: #49b1f5;
    }
    .tag-cloud-title {
        line-height: 2;
        font-size: 36px;
        text-align: center;
    }
    @media (max-width: 759px) {
        .tag-cloud-title {
            font-size: 25px;
        }
    }

    .tag-cloud a {
        color: #616161;
        display: inline-block;
        text-decoration: none;
        padding: 0 8px;
        line-height: 2;
        transition: all 0.3s;
    }
    .tag-cloud a:hover {
        color: #03a9f4 !important;
        transform: scale(1.1);
    }

    input{
        transition: 3s all;
        border: #49b1f5 3px solid;width:200px;height:30px;border-radius: 20px;text-align: center;
    }

</style>
